<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>任务属性</title>
    <style>
        #task-info {
            flow: vertical;
            margin-right: 0;
            overflow-y: scroll-indicator;
        }

        .header {
            padding-left: 5px;
            border-left: 5px solid rgb(1, 120, 254);
        }

        .info,
        .meta {
            margin-left: 10px;
        }

        .info > li,
        .meta > li {
            margin-bottom: 0.2em;
            white-space: nowrap;
            overflow-x: hidden;
            text-overflow: ellipsis;
            color: rgb(102, 102, 102);
        }

        .detail {
            width: 100%;
            border-collapse: collapse;
        }

        .detail > tbody {
            height: 7em;
            overflow-y: scroll-indicator;
        }

        .detail, th, td {
            border: 1px solid #E5E5E5;
            text-align: left;
        }

        .detail td:nth-child(2) {
            white-space: nowrap;
            overflow-x: hidden;
            text-overflow: ellipsis;
        }

        .preview {
            height: 170px;
            width: 128px;
            margin-left: 20px;
            cursor: pointer;
        }

        popup[role="tooltip"] {
            max-width: 20em;
            background-color: rgb(242, 248, 249);
            word-wrap: normal;
            word-break: break-all;
        }

        popup[role="overflow-tooltip"] {
            background-color: rgb(242, 248, 249);
        }

    </style>
    
    <script type="text/tiscript">
        include "../utils/utils.tis";

        self.ready = function() {
            var task = view.parameters;

            this.$(#task-info).content(<div>
                <h4.header>任务详情</h4>
                <div.info>
                    <li>任务ID：  { task.id }</li>
                    <li>任务标题：  { task.title }</li>
                    <li>任务状态：  { task.status == "error" ? <span style="color:red;">{ String.printf("error (%s)", task.error) }</span> : task.status }</li>
                    <li>文件大小：  { utils.bytesToSize(task.file_size) }</li>
                    <li>存储路径：  <a.path href={ task.path }>{ task.path }</a></li>
                    <li>解析器名：  { task.parser_name }</li>
                    <li>创建时间：  { (new Date(task.create_at)).toString("%Y-%m-%d %H:%M:%S") }</li>
                    <li>完成时间：  { task.finish_at ? (new Date(task.finish_at)).toString("%Y-%m-%d %H:%M:%S") : "--" }</li>
                    <li>总计用时：  { task.finish_at ? utils.timeDelta(new Date(task.create_at), new Date(task.finish_at)) : "--" }</li>
                    <li>任务链接：  <a.link href={ task.url }>link</a></li>

                </div>
                <h4.header>子任务</h4>
                <table.detail>
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>文件</th>
                            <th>状态</th>
                            <th>URL</th>
                        </tr>
                    </thead>
                    <tbody>{
                        task.subtasks.map((subtask, index) => <tr>
                            <td>{ index+1 }</td>
                            <td>{ subtask.filename }</td>
                            <td>{ subtask.status == "error" ? <span style="color:red;" tooltip={ subtask.error }>error</span> : subtask.status }</td>
                            <td>
                                <a.link href={ subtask.url }>link</a>
                            </td>
                        </tr>)
                    }</tbody>
                </table>
                <h4.header>附加信息</h4>
                <div.meta>{
                    Object.keys(task.meta).map((k) => <li>
                        { k }：  { task.meta[k] }
                    </li>)
                }</div>
                <h4.header>预览图</h4>
                { task.preview != "" ? <img.preview src={ task.preview } title={ task.preview } /> : <p>无</p> }
            </div>);
        }

        event click $(.info a.path) (evt,e) {
            Sciter.launch(e.attributes["href"].urlUnescape());
            return true;
        }

        event click $(a.link) (evt,e) {
            view.clipboard(#put, e.attributes["href"]);
            view.msgbox(#information, "已复制到剪切板！", "提示");
            return true;
        }

        event click $(img.preview) (evt,e) { Sciter.launch(e.attributes["title"]); }
    </script>
</head>

<body#task-info>
    
</body>

</html>